<template>
  <div class="group-title">
    <div class="circle" />
    <div class="title-lv1" @click="onBack">
      {{ lv1 || titleInfo.lv1 }}
    </div>
    <template v-if="!only">
      <div class="sep">
        >>
      </div>
      <div class="title-lv2">
        {{ lv2 || titleInfo.lv2 }}
      </div>
    </template>
    <slot></slot>
  </div>
</template>

<script setup>
import { computed, inject } from "vue";
import { titleData } from "./datas.js";

// eslint-disable-next-line no-undef
defineProps({
  lv1: {
    type: String,
    default: "",
  },
  lv2: {
    type: String,
    default: "",
  },
  only: {
    type: Boolean,
    default: false,
  },
});

const getPageInfo = inject("getPageInfo");
const onPageChange = inject("pageChange");

const titleInfo = computed(() => {
  const [from, to] = getPageInfo();
  const item = titleData.find((t) => t.from === from && t.to === to) || titleData.find((t) => t.from === -1 && t.to === to);
  return item || {};
});

const onBack = () => {
  const [from] = getPageInfo();
  if (from > 0) {
    onPageChange(from);
  }
};

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
